<template>
  <el-form :model="inspectDetail" ref="detailForm" class="elForm" :class="isEdit?'':'formItem'">

    <el-card class="box-card">
      <div slot="header" class="header-card">
        <span class="header-card-title">基础信息</span>
      </div>
      <el-row :gutter="24">
        <el-col :span="8" v-if="isShow">
          <el-form-item label="车架号:" style="width: 100%;">
            <span>{{ inspectDetail.vinNo }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isShow">
          <el-form-item label="车牌号:">
            <span>{{ inspectDetail.carNo }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isShow">
          <el-form-item label="品牌/车系/车型:">
            <span>
              {{
                `${inspectDetail.brandName}${inspectDetail.seriesName ? '/' + inspectDetail.seriesName :
                    ''}${inspectDetail.modelName ? '/' + inspectDetail.modelName : ''}`
              }}
            </span>
          </el-form-item>

        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="8" v-if="isShow">
          <el-form-item label="合同禀议号:">
            <span>{{ inspectDetail.contractReportNumber }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isShow">
          <el-form-item label="采购禀议号:">
            <span>{{ inspectDetail.procurementReportNumber }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isShow">
          <el-form-item label="客户名称:">
            <span>{{ inspectDetail.customerName }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="8" v-if="isShow">
          <el-form-item label="客户类型:">
            <span>{{ selectDictLabel(dict.type.customer_type, inspectDetail.customerType) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isShow">
          <el-form-item label="车辆归属:">
            <span>{{ inspectDetail.ascription }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isShow">
          <el-form-item label="车辆产权:">
            <span>{{ inspectDetail.propertyRightName }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <!--      <el-row :gutter="24">-->
      <!--        <el-col :span="8" v-if="isShow">-->
      <!--          <el-form-item label="总预算:">-->
      <!--            <span>{{ inspectDetail.totalPrice }}</span>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="8" v-if="isShow">-->
      <!--          <el-form-item label="剩余总预算:">-->
      <!--            <span>{{ inspectDetail.surplusTotalPrice }}</span>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->

      <el-row>
        <el-col :span="24" v-if="isShow">
          <div class="decoration-illustrate">
            <span>精品装饰说明：</span>
            <span></span>
          </div>
          <el-table size="mini" :data="inspectDetail.decorateProList" border style="width: 100%">
            <el-table-column prop="decorateName" label="项目" />
            <el-table-column prop="budgetPrice" label="单车预算金额">
              <template slot-scope="scope">
                <span>{{ format_thousand(scope.row.budgetPrice) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="说明" />
          </el-table>
        </el-col>
      </el-row>
    </el-card>

  </el-form>
</template>

<script>
export default {
  name: 'decorationBasicInfo',
  dicts: ['work_order_type', 'online_offline', 'customer_type'],
  model: {
    prop: 'inspectDetail'
  },
  props: {
    inspectDetail: {
      type: Object,
      default: {}
    },
    state: {
      type: String,
      default: "",
    },
  },

  data() {
    return {
      isShow: true
    };
  },
  computed: {
    isEdit() {
      let bool;
      switch (this.state) {
        case "write":
          bool = true;
          break;
        case "disabled":
          bool = false;
          break;
        case "readonly":
          bool = false;
          break;
      }
      return bool
    },
    selectDictLabel() {
      return function (arr, val) {
        return arr
          .map((a) => {
            if (a.value == val) {
              return a.label;
            }
          })
          .filter((a) => a)[0];
      };
    },
  },
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
@import "@/styles/cwgd/formScss.scss";

.elForm {
  .el-form-item {
    width: 100%;
  }
}
</style>


